<div class="margin-content">
  <div class="videos-header">
    <div *ngIf="titlePage" class="title-page title-page-single">
      <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
        {{ titlePage }}
      </div>
      <my-feed *ngIf="titlePage" [syndicationItems]="syndicationItems"></my-feed>
    </div>

    <div class="action-block" *ngIf="actions.length > 0">
      <a [routerLink]="action.routerLink" routerLinkActive="active" *ngFor="let action of actions">
        <button class="btn">
          <my-global-icon [iconName]="action.iconName"></my-global-icon>
          <span>{{ action.label }}</span>
        </button>
      </a>
    </div>

    <div class="moderation-block" *ngIf="displayModerationBlock">
      <my-peertube-checkbox
        (change)="toggleModerationDisplay()"
        inputName="display-unlisted-private" i18n-labelText labelText="Display unlisted and private videos"
      >
      </my-peertube-checkbox>
    </div>
  </div>

  <div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
  <div
    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
    class="videos"
  >
    <ng-container *ngFor="let video of videos; trackBy: videoById;">
      <div class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
        {{ getCurrentGroupedDateLabel(video) }}
      </div>

      <my-video-miniature
        [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
        [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
        (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
      >
      </my-video-miniature>
    </ng-container>
  </div>
</div>
